水平レイアウト

Spread.Viewsでは、水平レイアウトを使用できます。水平レイアウトは、基本的にグリッドレイアウトと同じですが、列が縦向きにではなく、横向きに配置されます。

水平レイアウトでは、グリッドレイアウトと同じパラメータを使用できます。すべてのオプションは、水平レイアウトでも同じロジックに基づいて機能しますが、列ヘッダーが行ヘッダーに入れ替わるため、ヘッダー関連のパラメータ値はそのように処理されます。グリッドレイアウトと処理方法の異なるパラメータオプションは、次のとおりです。

• rowHeightWidth
• rowHeight
• colWidth
• colHeaderHeight

水平レイアウトを実装するには、次の手順を実行します。

サンプルコード

以下の手順では、グリッドの初期化と列の定義を終えていることを前提としています。詳細については、「基本的なグリッドの作成」および「列の定義」を参照してください。

1. 以下のファイルへの参照を追加します。

   <link rel="stylesheet" type="text/css" href="[Your Stylesheet Path]/gc.spread.views.horizontallayout.10.0.0.css">
   <script src="[Your Script Path]/gc.spread.views.horizontallayout.10.0.0.min.js" type="text/JavaScript">
   </script>
   <script src="data/TVData_small.js" type="text/javascript"></script>

2. HorizontalLayoutオブジェクトを初期化します。

   var dataView = new GC.Spread.Views.DataView(document.getElementById('grid1'), data, columns, new GC.Spread.Views.Plugins.HorizontalLayout({
               colHeaderHeight: 150,
               colWidth: 30,
               rowHeight: 280,
               selectionUnit: 'cell',
               showRowHeader: false
       }));